<template>
  <div class="container">
    <!-- 根据通知单号返显明细 start-->
    <el-form align="left" v-if="formVisible" :model="detail.arrivalnoticeDto" label-width="120px" size="mini">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.notice.noticenumber')" prop="noticenumber">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.noticenumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')" prop="ordernumber">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.ordernumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.typename')" prop="typename">
            <!-- 1 订单到货 2 第三方到货 3 退货到货 4其它 -->
            <el-input maxlength="20" show-word-limit v-model="typename" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.warehouse')" prop="warehouseid">
            <el-input maxlength="20" show-word-limit v-model="$store.state.basicInfo.warehouseInfo.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.consignor')" prop="consignorname">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.consignorname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.suppliername')" prop="suppliername">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.suppliername" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.deliverycompany')" prop="deliverycompany">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.deliverycompany" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.platenumber')" prop="platenumber">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.platenumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.deliveryman')" prop="deliveryman">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.deliveryman" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.contact')" prop="contact">
            <el-input maxlength="20" show-word-limit v-model="detail.arrivalnoticeDto.contact" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('m.remark')" prop="remark">
            <el-input type="textarea" maxlength="100" show-word-limit v-model="detail.arrivalnoticeDto.remark" :rows="2" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 根据通知单号查询明细 end-->

    <!-- table start -->
    <el-table ref="table" stripe empty-text fit tooltip-effect="dark" :data="detail.arrivalnoticedetailList" v-loading="tableLoading">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" :label="$t('m.sigin.picture')">
        <template slot-scope="scope">
          <template v-if="!scope.row.skudto.quantitypicture||scope.row.skudto.quantitypicture==='[{}]'">
            <img width="80px" src="@/assets/defalut.png" alt />
          </template>
          <template v-else>
            <el-tooltip class="item" effect="dark" :content="$t('m.sigin.skuDetailTips')" placement="top">
              <el-image
                class="table-image"
                width="80px"
                :src="`${filePath}${JSON.parse(scope.row.skudto.quantitypicture)[0]['FilePath']}`"
                @click="getSkuPicture(scope.row)">
                <div slot="error" class="image-slot">
                  <img width="80px" src="@/assets/defalut.png" alt />
                </div>
              </el-image>
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="productspeccode" label="sku"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.sigin.siginDate')">
        <template slot-scope="scope">
          <p>PD:{{scope.row.pd}}</p>
          <p>EXP:{{scope.row.exp}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
      <el-table-column align="center" prop="plannedquantity" :label="$t('m.in.plannedquantity')"></el-table-column>
      <el-table-column align="center" prop="actualquantity" :label="$t('m.sigin.arrive')"></el-table-column>
      <el-table-column align="center" :label="$t('m.operation')">
        <template slot-scope="scope">
          <!-- btn：理货 -->
          <template v-if="scope.row.plannedquantity>scope.row.actualquantity">
            <el-button size="mini" type="primary" @click="triggerSigning(scope.$index,scope.row)">{{$t('m.sigin.sigin')}}</el-button>
          </template>
          <!-- btn：理货 -->
          <!-- btn：查看理货结果 -->
          <template v-else>
            <el-button size="mini" type="primary" @click="triggerSigning(scope.$index,scope.row)">{{$t('m.sigin.result')}}</el-button>
          </template>
          <!-- btn：查看理货结果 -->
        </template>
      </el-table-column>
    </el-table>
    <div class="btns">
      <el-button type="primary" @click="$router.back(-1)">{{$t('m.back')}}</el-button>
    </div>

    <!-- 展示sku信息图片dialog start -->
    <skuPicturePopup
      v-if="skuPicturePopupVisible"
      :popupVisible="skuPicturePopupVisible"
      :detail="skuDetail"
      @close="skuPicturePopupVisible=false"
    ></skuPicturePopup>
    <!-- 展示sku信息图片dialog end -->

    <!-- 理货功能dialog start -->
    <signingAddPopup
      v-if="signingAddPopupVisible"
      :popupVisible="signingAddPopupVisible"
      :arrivalnoticeDetail="arrivalnoticeArg"
      :location="selectedLocation"
      @close="signingAddPopupVisible=false"
      @showLocationDialog="showLocationDialog"
      @callback="getData"
    ></signingAddPopup>
    <!-- 理货功能dialog end -->

    <!-- 选择库位dialog start -->
    <locationListPopup
      v-if="locationListPopupVisible"
      :popupVisible="locationListPopupVisible"
      :config="locationConfig"
      :disabledLocation="locationId"
      @submit="setLocation"
      @close="locationListPopupVisible=false"
    ></locationListPopup>
    <!-- 选择库位dialog end -->

    <!-- table end -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'',
  data(){
    return {
      filePath:window._config_.filepath, // 图片域名
      noticenumber:'', // 通知单号
      detail:{ // 通知单内容
        arrivalnoticeDto:{},
        arrivalnoticedetailList:[]
      },

      skuDetail:{}, // sku图片详情（多图轮播，产品ICON等）
      skuPicturePopupVisible:false, // 控制展示sku信息图片dialog显示隐藏

      arrivalnoticeArg:{},
      signingAddPopupVisible:false, // 控制理货功能dialog显示隐藏

      locationConfig:{}, // 需要传递给locations-list组件的参数
      locationId:[], // 当前已选择的库位
      locationListPopupVisible:false, // 控制选择库位dialog显示隐藏
      selectedLocation:{}, // 选中的库位信息：code&id

      previewList:[] // 预览图片
    }
  },
  beforeRouteEnter(to,from,next){
    if(!Object.keys(to.query).length){
      next((vm)=>{
        vm.$router.push({name:'newArrivalNotice'})
      })
    } else {
      next((vm)=>{
        vm.noticenumber = vm.$route.query.noticenumber
        vm.getData()
      })
    }
  },
  components:{
    skuPicturePopup:() => import('@/components/common/sku-picture'),
    signingAddPopup:() => import('@/components/arrivalNotice/signing-add-popup'),
    locationListPopup:() => import('@/components/common/location-list')
  },
  computed:{
    formVisible(){
      return Object.keys(this.detail.arrivalnoticeDto).length
    },
    typename(){
      return [
        this.lan('m.in.arrivaltype1'),
        this.lan('m.in.arrivaltype2'),
        this.lan('m.in.arrivaltype3'),
        this.lan('m.in.other')][this.detail.arrivalnoticeDto.typeid - 1]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    // 根据理货单号获取具体信息
    getData(){
      let options = {
        method:'get',
        url:`/signin/noticenumberfn/${this.noticenumber}`
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.detail = data
        setTimeout(()=>this.tableLoading=false,500)
        this.detail.arrivalnoticedetailList.forEach(ele => {
          //  PD=当天-禁收期；
          //  EXP=当天+保质期-禁收期。
          let date = new Date()
          date.setDate(date.getDate() - ele.limitationofreceipt)
          ele.pd = common.timestampSimple(date)
          if (ele.isexpiration === 1 || ele.expirationnum !== 0){
            if (ele.expirationnum){
              date.setDate(date.getDate() + ele.expirationnum)
              ele.exp = common.timestampSimple(date)
            }
          } else {
            ele.exp = '- -'
          }
        })
      })
    },
    // 展示sku信息图片dialog
    getSkuPicture(row){
      this.skuDetail = this.cloneObject(row.skudto)
      this.skuDetail.quantitypicture = this.skuDetail.quantitypicture === '[{}]'?[]:JSON.parse(this.skuDetail.quantitypicture)
      this.skuPicturePopupVisible = true
    },
    // 理货&&查看理货结果按钮
    triggerSigning(index, row){
      this.activeIndex = index
      let completed = row.plannedquantity - row.actualquantity <= 0
      let noticenumber = this.detail.arrivalnoticeDto.noticenumber
      let { productspeccode:sku, actualquantity } = row
      this.arrivalnoticeArg = { noticenumber, sku, actualquantity, completed }
      this.signingAddPopupVisible = true
    },
    // 激活选择上架库位dialog
    showLocationDialog(config,locationId){
      this.locationConfig = config
      this.locationId = locationId
      this.locationListPopupVisible = true
    },
    // 选择库位后回调
    setLocation(selectedLocation){
      this.selectedLocation = selectedLocation
      this.locationListPopupVisible = false
    }
  },
  beforeRouteLeave(to, form, next){
    this.skuPicturePopupVisible=false
    this.skuPicturePopupVisible=false
    this.locationListPopupVisible=false
    next()
  }
}
</script>

<style lang='scss' scoped>
.container {
  max-width: 1400px;
  margin: 0 auto;
}
.el-image.table-image ::v-deep img{
  cursor: pointer;
}
</style>
